<script setup lang="ts">
import ApproveEditRadioPicker from './components/approve-edit-radio-picker.vue';
import ApproveEditCheckboxPicker from './components/approve-edit-checkbox-picker/approve-edit-checkbox-picker.vue';
import ApproveEditSelectDate from './components/approve-edit-select-date.vue';
import approveEditTable from './components/approve-edit-table.vue';
import ApproveEditInputSingle from './components/approve-edit-input-single.vue';
import ApproveEditInputNumber from './components/approve-edit-input-number.vue';
import ApproveEditInputMultiline from './components/approve-edit-input-multiline.vue';
import ApproveEditPic from './components/approve-edit-pic.vue';
import ApproveEditSign from './components/approve-edit-sign.vue';
import ApproveEditSelectDepartment from './components/approve-edit-select-department.vue';
import { appEvents } from '/@/utils/events';
const props = defineProps<{
  /**
   * 发起人表单操作权限
   *
   */
  attributes: FlowPathTemplateApi.AttributeExtendDto[];
}>();
</script>
<template>
  <!--  目前只有单选框和数字输入控件支持条件分支判断 ，只对这两种类型的进行监听eventCenter -->
  <nut-form class="approve-edit-form">
    <!--  目前只有单选框和数字输入控件支持条件分支判断 ，只对这两种类型的进行监听eventCenter -->
    <template v-for="item in props.attributes" :key="item.id">
      <!--1-单行输入框，2-图片，3-日期，4-多行输入框，5-数字输入框，6-单选框，7-多选框，8-手写签名，9-设备选择,10 -->
      <template
        v-if="
          (item.attributeTypeName === 'singleline' || item.attributeType === 1) &&
          item.hiddenAble !== 1
        "
      >
        <approve-edit-input-single :item="item" />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'pic' || item.attributeType === 2) && item.hiddenAble !== 1
        "
      >
        <approve-edit-pic :item="item" />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'date' || item.attributeType === 3) && item.hiddenAble !== 1
        "
      >
        <approve-edit-select-date
          :item="item"
          @on-change="
            (value) => {
              item.attributeValue = value;
            }
          "
        />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'multiline' || item.attributeType === 4) &&
          item.hiddenAble !== 1
        "
      >
        <approve-edit-input-multiline :item="item" />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'number' || item.attributeType === 5) && item.hiddenAble !== 1
        "
      >
        <approve-edit-input-number :item="item" />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'radio' || item.attributeType === 6) && item.hiddenAble !== 1
        "
      >
        <approve-edit-radio-picker
          :item="item"
          @on-change="
            (value) => {
              item.attributeValue = value;
              console.log('radio item.attributeValue', item);
              if (item.isCondition) {
                appEvents.trigger('conditionAttributeChanged');
              }
            }
          "
        />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'checkbox' || item.attributeType === 7) &&
          item.hiddenAble !== 1
        "
      >
        <approve-edit-checkbox-picker
          :item="item"
          @on-change="
            (value) => {
              item.attributeValue = value;
              if (item.isCondition) {
                appEvents.trigger('conditionAttributeChanged');
              }
            }
          "
        />
      </template>
      <template
        v-else-if="
          (item.attributeTypeName === 'sign' || item.attributeType === 8) && item.hiddenAble !== 1
        "
      >
        <approve-edit-sign :item="item" />
      </template>
      <template v-else-if="item.attributeType === 10 && item.hiddenAble !== 1">
        <approve-edit-table :item="item" />
      </template>
      <template
        v-else-if="
          (item.attributeType === 11 || item.attributeTypeName === 'department') &&
          item.hiddenAble !== 1
        "
      >
        <approve-edit-select-department
          :item="item"
          @on-change="
            (id:string, name:string) => {
              const obj = {id,name}
              item.attributeValue = JSON.stringify(obj);
            }
          "
        />
      </template>
    </template>
  </nut-form>
</template>
<style lang="scss">
.approve-edit-form {
  .nut-cell-group {
    &__wrap {
      margin: 0;
    }
  }
}
</style>
